<template>
  <div class="version-manage-box w-full h-full display-flex-column" style="overflow: hidden">
    <div class="btn-box display-flex m-t-sm" style="height: 40px">
      <div class="left-box display-flex">
        <a-button type="primary" @click="onSearch" class="m-r-sm">刷新</a-button>
        <a-button type="primary" @click="onEdit">新建</a-button>
      </div>
      <div class="right-box flex-1 display-flex" style="justify-content: flex-end">
        <a-input-search
          v-model="searchText"
          placeholder="请搜索"
          enter-button
          @search="onSearch"
          style="width: 350px"/>
      </div>
    </div>
    <div class="content-box m-t-sm flex-1 display-flex-column" style="overflow: hidden">
      <a-table
        class="dist-simple-table w-full"
        rowKey="id"
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        :loading="isTableLoading"
      >
        <template slot="content" slot-scope="text">
          <div class="table-content" :title="text">{{ text }}</div>
        </template>
        <!-- <template #activated="{ text, record }">-->
        <template slot="activated" slot-scope="text, record">
          <a-switch
            :checked="record.activated === 1"
            @change="onActivatedChange(record)"
            :loading="record.loading"
          />
        </template>
        <template slot="operate" slot-scope="text,record">
          <div class="display-flex">
            <a-button type="primary" class="m-r-sm" @click="onEdit(record)">编辑</a-button>
            <a-button type="danger" @click="onDelete(record)">删除</a-button>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import PushLogDetail from '@v/investmentOnline/interfaceMonitor/detail/PushLogDetail.vue'
import versionService from '@/api/system/versionService'

const columns = [
  {
    title: '版本号',
    dataIndex: 'versionNum',
    width: '120px',
    align: 'center'
  },
  {
    title: '发布时间',
    dataIndex: 'publishTime',
    align: 'center',
    width: '350px'
  },
  {
    title: '版本内容',
    dataIndex: 'content',
    scopedSlots: { customRender: 'content' }
  },
  {
    title: '是否激活',
    dataIndex: 'activated',
    align: 'center',
    width: '140px',
    scopedSlots: { customRender: 'activated' }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    width: '140px',
    scopedSlots: { customRender: 'operate' }
  }
]

export default {
  name: 'VersionManage',
  components: { PushLogDetail },
  props: {},
  data () {
    return {
      dataList: [],
      searchText: '',
      isTableLoading: false,
      columns: columns,
      preParams: {},
      pagination: {
        pageSize: 20, // 默认每页显示数量
        total: 0,
        current: 1,
        showSizeChanger: true, // 显示可改变每页数量
        showTotal: (total) => `共${total}条数据`, // 显示总数
        onChange: (current, pageSize) => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
          this.loadData(this.preParams)
        }
      }
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    onSearch () {
      this.loadData()
    },
    onEdit (record) {
      const that = this
      this.$dialog({
        title: record ? '新建版本' : '修改版本',
        content: () => import('./VersionManageDetail.vue'),
        width: window.document.body.clientWidth * 0.6 + 'px',
        bodyStyle: { height: '600px', padding: '0' },
        centered: true,
        maskClosable: false,
        okButtonProps: {},
        props: {
          sourceId: record.ID
        },
        model: {},
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            const versionData = dialogCtl.getVersionLogInfo()
            console.log('versionData', versionData)
            if (!versionData.versionNum) {
              that.$message.warning('请输入有效版本号')
              return
            }
            if (!versionData.publishDate) {
              that.$message.warning('请输入发布日期')
              return
            }
            if (!versionData.content) {
              that.$message.warning('请输入版本内容')
            }
            await versionService.save(versionData)
            that.$message.success('保存成功')
            await that.loadData()
            ctl.closeDialog()
          }
        }
      })
    },
    onActivatedChange (record) {
      const that = this
      record.loading = true
      this.$confirm({
        title: '提示',
        content: '是否激活当前版本？',
        okType: 'danger',
        async onOk () {
          await versionService.changeActivated(record.id)
          that.$message.success('操作成功')
          record.loading = false
          if (record.activated === 1) {
            record.activated = 0
          } else {
            record.activated = 1
          }
        },
        async onCancel () {
          record.loading = false
        }
      })
    },
    onDelete (record) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '是否删除当前版本？',
        okType: 'danger',
        async onOk () {
          await versionService.delete(record.id)
          await that.$message.success('删除成功')
          await that.loadData()
        }
      })
    },
    async loadData (params = {}) {
      this.preParams = params
      this.isTableLoading = true
      // const sqlParam = {
      //   sqlConfigName: 'listVersionLog',
      //   pageIndex: this.pagination.current,
      //   pageSize: this.pagination.pageSize,
      //   params: Object.assign({}, params)
      // }
      const data = await versionService.list({})
      this.dataList = data.map(item => ({
        ...item, // 保留原对象的属性
        loading: false // 增加新属性
      }))
      this.pagination.total = 11
      this.isTableLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.version-manage-box {
  background-color: white;
  padding: 0 10px;

  /deep/ .dist-simple-table {
    display: flex;
    overflow: hidden;
    flex: 1;

    th {
      text-align: center;
    }

    .ant-spin-nested-loading {
      width: 100%;
      height: 100%;

      .ant-spin-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .ant-table {
          width: 100%;
          flex: 1;
          overflow: auto;
        }
      }
    }

  }

  /deep/ .dist-simple-table {
    .stage-item {
      .item-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .table-content {
      max-width: 600px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
